<!-- 用户管理 -->
<template>
  <div class="conversation-log">
    <searchGroup
      v-model="searchObj"
      :options="searchOptions"
      @search="searchChange"
      @getHeight="setHeight"
    />

      <TemplateTable
        ref="tableRef"
        :data="tableData"
        :columns="tableColumns"
        :loading="loading"
        :height="tableHeight"
        :page="pageIndex"
        :page-size="pageSize"
        :total="total"
        border="none"
        size="small" 
        stripe
        @page-change="handlePageChange"
      >
        <template #source="{row}">
          <p>{{row.sourcename}}</p>
          <p>{{formatToDateTime(row.createtime)}}</p>
        </template>
      </TemplateTable>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  getCurrentInstance,
  inject,
  watch,
  nextTick,
  computed,
} from 'vue';
import { Message } from 'view-ui-plus';
import { listLog } from '@/api/modules/agent';
import { formatToDateTime } from '@/util/dateUtil';
// 屏幕高度
const screenHeight = inject('screenHeight');
// 搜索组件高度
const searchHeight = ref(null);
// 表格高度
const tableHeight = ref(0);
// 监听 screenHeight 的变化
watch(
  screenHeight,
  (newHeight) => {
    if (searchHeight.value) {
      tableHeight.value = newHeight - searchHeight.value - 245;
    }
  },
  { immediate: true }
);
// 是否显示新增
const showAdd = ref(false);

// 当前对象
const { proxy } = getCurrentInstance();

// 搜索条件字段
const searchObj = ref({
  sourcename: undefined,
  createtime: [],
  title: undefined,
});
const DEFAULT_LIST = [{}];
// 搜索条件配置
const searchOptions = ref([
  {
    type: 'select',
    model: 'sourcename',
    placeholder: '请选择',
    label: '来源:',
    dataList: DEFAULT_LIST,
    multiple: true,
  },
  {
    type: 'daterange',
    model: 'createtime',
    placeholder: '请选择日期',
    label: '时间:',
  },
  {
    type: 'input',
    model: 'title',
    placeholder: '请输入关键字',
    label: '标题:',
  },
]);

const pageIndex = ref(1);
const pageSize = 20;
const total = ref(0);
// 表单元素对象
const tableRef = ref(null);
// 列表数据
const tableData = ref([]);

// 加载状态
const loading = ref(false);

// 表格列配置
const tableColumns = computed(() => [
  {
    title: '来源 & 时间',
    minWidth: 200,
    slot: 'source',
  },

  {
    title: '使用者',
    minWidth: 200,
    key: 'username',
    formatter: ({ row }) => {
      return row.username;
    },
  },
  {
    title: '标题',
    key: 'title',
    minWidth: 100,
    formatter: ({ row }) => {
      return row.title;
    },
  },
  {
    title: '消息总数',
    key: 'messagecount',
    minWidth: 100,
    formatter: ({ row }) => {
      return row.messagecount;
    },
  },
  {
    title: '用户反馈',
    key: 'userfeedback',
    minWidth: 200,
    formatter: ({ row }) => {
      return row.userfeedback || '-';
    },
  },
  {
    title: '自定义反馈',
    key: 'customfeedback',
    minWidth: 200,
    formatter: ({ row }) => {
      return row.customfeedback || '-';
    },
  },
  {
    title: '标注答案数量',
    key: 'labeledanswercount',
    minWidth: 100,
    formatter: ({ row }) => {
      return row.labeledanswercount || 0;
    },
  },
]);

// 获取组件高度
const setHeight = (height) => {
  searchHeight.value = height;
  tableHeight.value = screenHeight.value - searchHeight.value - 245;
};
// 获取角色列表
const getLogList = (reset) => {
  if (reset) {
    pageIndex.value = 1;
  }
  loading.value = true;
  const starttime = searchObj.value.createtime[0] || undefined;
  const endtime = searchObj.value.createtime[1] || undefined;
  listLog({
    query: {
      p: pageIndex.value,
      ps: pageSize,
    },
    data: {
      starttime,
      endtime,
      sourcename: searchObj.value.sourcename,
      title: searchObj.value.title,
    },
  })
    .then(({ data }) => {
      tableData.value = data?.topicList || [];
      total.value = data?.totalElements || 0;
    })
    .finally(() => {
      loading.value = false;
    });
};
getLogList(true);

// 处理页码变化
const handlePageChange = (page) => {
  pageIndex.value = page;
  getLogList();
};

const searchChange = () => {
  getLogList(true);
};
</script>

<style lang="scss" scoped>
.conversation-log {
  background-color: #fff;
}
.content_table {
  width: 100%;
}
</style>
